<template>
    <div class="home">
        <Header head-title="我的余额" go-back="true"></Header>

        <section class="group">
            <section class="bg_blue money borderR Select">
                <div class="Doctor">
                    <img src="../../../assets/img/Money.png" alt="">
                </div>
                <div class="fontCfff SelectS">
                    <p class="fonts">账户余额</p>
                    <h3 class="fontsMax">￥123.12</h3>
                    <span @click="BalanceRecharge()" class="borderR fonts moneyBtn">充值</span>
                </div>
            </section>
        </section>

        <!-- //  消费记录  充值记录  银行卡 -->

        <section class="group groupA">
            <el-tabs v-model="activeName">
                <el-tab-pane label="充值记录" name="first">
                     <section class="Select IconCom" @click="Rechargerecord()">
                        <div class="IconLeft">
                            <img src="../../../assets/img/cardPay.png" alt="">
                        </div>
                        <div class="InfoRight">
                          <div class="Select fonts">
                            <h3>健康卡充值
                            </h3>
                            <p class="fontsB activecolor">+ ￥300</p>
                          </div>
                            <p class="fonts">平顶山市第一人民医院.内科</p>
                            <p class="fonts">卡号：4127********1890(渣渣辉)</p>
                            <div class="Select fontsMin fontC">
                              <p>201939320998489</p>
                              <p>2019-04-01 12:00:36</p>
                            </div>
                        </div>
                    </section>
                     <section class="Select IconCom" @click="Rechargerecord()">
                        <div class="IconLeft">
                            <img src="../../../assets/img/wxrecord.png" alt="">
                        </div>
                        <div class="InfoRight">
                          <div class="Select fonts">
                            <h3>微信充值
                            </h3>
                            <p class="fontsB activecolor">￥9.0</p>
                          </div>
                            <p class="fonts">平顶山市第一人民医院.内科</p>
                            <p class="fonts">卡号：4127********2890(渣渣辉)</p>
                            <div class="Select fontsMin fontC">
                              <p>201939320998489</p>
                              <p>2019-04-01 12:00:36</p>
                            </div>
                        </div>
                    </section>
                </el-tab-pane>
                <el-tab-pane label="消费记录" name="second">
                     <section class="Select IconCom" @click="Consumrecord()">
                        <div class="IconLeft">
                            <img src="../../../assets/img/iconhao.png" alt="">
                        </div>
                        <div class="InfoRight">
                          <div class="Select fonts">
                            <h3>挂号支付
                              <span class="fontC fontsMin">普通门诊</span>
                            </h3>
                            <p class="fontsB activecolor">￥9.0</p>
                          </div>
                            <p class="fonts">平顶山市第一人民医院.内科</p>
                            <div class="Select fontsMin fontC">
                              <p>201939320998489</p>
                              <p>2019-04-01 12:00:36</p>
                            </div>
                        </div>
                    </section>
                     <section class="Select IconCom" @click="Consumrecord()">
                        <div class="IconLeft">
                            <img src="../../../assets/img/iconzhen.png" alt="">
                        </div>
                        <div class="InfoRight">
                          <div class="Select fonts">
                            <h3>挂号支付
                              <span class="fontC fontsMin">普通门诊</span>
                            </h3>
                            <p class="fontsB activecolor">￥9.0</p>
                          </div>
                            <p class="fonts">平顶山市第一人民医院.内科</p>
                            <div class="Select fontsMin fontC">
                              <p>201939320998489</p>
                              <p>2019-04-01 12:00:36</p>
                            </div>
                        </div>
                    </section>
                </el-tab-pane>
                <el-tab-pane label="银行卡" name="third">
                    <section class="bg_orange money borderR Select">
                        <div class="Doctor">
                            <img src="../../../assets/img/LogoB.png" alt="">
                        </div>
                        <div class="fontCfff moneyB">
                            <p class="fontsB">中国银行</p>
                            <p class="fonts">储蓄卡</p>
                            <p  class="fonts">1029********1929</p>
                        </div>
                    </section>

                    <p class="fonts fontC infoTitle">注意：因第三方系统业务变更，暂不支持银行卡解绑和提现业务，后续恢复此功能，有疑问，请拨打客服电话：400-000-0000</p>

                </el-tab-pane>
            </el-tabs>
        </section>

    </div>
</template>
<script>

import Header from '../../../components/Header'

export default {
  data () {
    return {
      activeName: 'first'
    }
  },
  components: {
    Header
  },
  methods: {
    BalanceRecharge () {
      this.$router.push({
        path: '/BalanceRecharge'
      })
    },
    Consumrecord () {
      this.$router.push({
        path: '/Consumrecord'
      })
    },
    Rechargerecord () {
      this.$router.push({
        path: '/Rechargerecord'
      })
    }
  }
}
</script>

<style scoped>
.groupA {
    margin-top: 0;
    padding-top: 0;
}
</style>
